<template>
  <div id="container">
    <v-header></v-header>
    <section id="main">	
      <h1 class="headLine01">ログイン</h1>
      <div class="comBox">
        <div class="mailForm">
          <ul class="formList">
            <li><input type="text" v-model="item.loginId" maxlength="30" placeholder="ログインアカウント"></li>
            <li><input type="password" v-model="item.passWord" maxlength="20" placeholder="パスワード"></li>
            <li><input type="button" @click="doLogin" value="ログインする"></li>
          </ul>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import vHeader from '@/components/Header.vue'
export default {
  data() {
    return {
      item: {
        loginId: '',
        passWord: ''
      },
      rules: {}
    }
  },

  components: {
    vHeader
  },
  
  created() {
    this.Session.set('role-mode', 'customer');
  },

  methods: {
    doLogin() {

      let errNum = 0;
      this.rules = {};
      if (!this.item.customerTel) {
        this.$toast({
          message: 'ログインアカウント',
        });
        return;
      }
      if (!this.item.passWord) {
        this.$toast({
          message: 'パスワードを入力してください',
        });
        return;
      }
      this.$indicator.open();
      this.Api.post('loginId', this.item).then(res => {
        this.$indicator.close();
        if (res.data.code == 0) {
          let data = res.data.data;
          this.Session.set('customerName', data.customerName);
          this.Session.setApiAccessToken(data.token);
          this.$router.push('/customer/topmenu');
        } else {
          this.$toast({
            message: 'ログイン失敗しました。',
          });
        }
      }).catch(err => {
        this.$indicator.close();
      });
    }
  }

}
</script>
